<template>
	<page-meta class="page" :style="{ 'min-height': h + 'px' }"
		:page-style="'overflow:' + (teamworkShow ? 'hidden' : 'visible')">
		<!-- 分享按钮 -->
		<button class="share" open-type="share" v-if="object.goodsType == 3">
			<image :src="shareIcon"></image>分享
		</button>
		<!-- 	<view class="share" @click="shareOut()">
			
			分享
		</view> -->
		<customNavBar1 title="渔家乐"></customNavBar1>
		<u-swiper :list="list" @change="e => currentNum = e.current" :autoplay="true" :circular="true"
			indicatorStyle="right: 20px;bottom:30px;color:#fff" height='612rpx'>
			<view slot="indicator" class="indicator-num">
				<text class="currentNum">{{ currentNum + 1 }}/{{ list.length }}</text>
			</view>
		</u-swiper>
		<view class="basicInfo">
			<!-- 拼船 -->
			<view class="pcInfo" v-if="object.goodsType == 3">
				<view class="top">
					<view class="price">
						<text>￥</text>
						<text>{{ object.avePrice||'' }}</text>
						<text v-if="object.discountPrice||''">{{ object.normalPrice||'' }}</text>
						<text v-else></text>
					</view>
					<view class="num">还差 {{ object.residueClusteringNum || 0 }} 人成团</view>
				</view>
				<view class="bottom">
					<view class="left">
						<image src="https://i.ringzle.com/file/20240319/7b2cbf160ef94749976809b8972a74e8.png"></image>
						<text>累计销量{{ object.soldNum||'' }}单</text>
					</view>
					<view class="right">
						<text>{{ object.playTime||'' }}截止</text>
						<text>{{ object.clusteringNum||'' }}人拼团</text>
					</view>
				</view>

			</view>
			<view class="name">{{ object.goodsName||'' }}
			</view>
			<view class="remark">
				<text>{{
					object.featureLabels||''
				}}</text>
			</view>
			<!-- 包船 -->
			<view class="i_price" v-if="object.goodsType != 3">
				<view style="color: #FD3939;" v-if="object.goodsType == 2">￥<text style="color: #FD3939;">{{ object.normalPrice }}</text><text class="unit">/艘</text></view>
				<view style="color: #FD3939;" v-if="object.goodsType == 1">￥<text style="color: #FD3939;">{{ object.discountPrice }}</text><text class="unit">/艘</text><text
						class="beforePrice">{{ object.normalPrice }}</text></view>
				<view v-if="object.soldNum">已售<text>{{ object.soldNum || 0 }}</text></view>
			</view><!-- 包船 -->
			<view class="one-input" @click="goLocation()">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="9">
						<view class="demo-layout bg-purple-light">
							<view class="one2">
								{{ object.islandName || '嵊泗菜园镇' }}
							</view>
							<view class="two2">
								{{ object.areaDetail || '菜园镇石柱村宫前巷1号村委旁边' }}
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple">
							<view class="one1">
								<image src="https://i.ringzle.com/file/20240129/4496f5e1754649ed8a78a2ca9de26e4c.png" mode="aspectFit">
								</image>
							</view>
							<view class="two1">
								<text>导航</text>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 拼船 -->
			<template v-if="object.goodsType != 2">
				<view class="li">
					<text>上船码头</text>
					<text>{{ object.boardSite||'' }}</text>
				</view>
				<view class="li">
					<text>发船时间</text>
					<text>{{ object.playDate||'' }} {{ object.playTime||'' }}</text>
				</view>
			</template>
		</view>
		<!-- 拼船规则 -->
		<view class="pcRules" v-if="object.goodsType == 3">
			<view class="tit">
				<text>拼团流程</text>
				<text>拼团规则</text>
			</view>
			<view class="tu">
				<view class="item">
					<image :src="icons[0]"></image>
					<text>立即拼船</text>
				</view>
				<view class="line"></view>
				<view class="item">
					<image :src="icons[1]"></image>
					<text>支付订单</text>
				</view>
				<view class="line"></view>
				<view class="item">
					<image :src="icons[2]"></image>
					<text>等待拼团</text>
					<text>(未成团时)</text>
				</view>
				<view class="line"></view>
				<view class="item">
					<image :src="icons[3]"></image>
					<text>成团出海</text>
					<text>(未成团退款)</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="tabs">
				<view :class="tabIndex == 1 ? 'active' : ''" @tap="tabIndex = 1">商品特色</view>
				<view :class="tabIndex == 2 ? 'active' : ''" @tap="tabIndex = 2">购买须知</view>
			</view>
			<view class="t_spts" v-if="tabIndex == 1">
				<view class="marks">
					<view class="item">
						<text>上船地点</text>
						<text>{{ object.boardSite||'' }}</text>
					</view>
					<view class="item">
						<text>出海体验时长</text>
						<text>{{ object.playLength||'' }}小时</text>
					</view>
					<view class="item">
						<text>活动区域</text>
						<text>{{ object.playArea||'' }}</text>
					</view>
					<view class="item">
						<text>作业方式</text>
						<text>{{ object.workWay||'' }}</text>
					</view>
					<view class="item">
						<text>乘客座位数</text>
						<text>{{ object.seatNum||'' }}人</text>
					</view>

				</view>
				<image :src="object.tripLights" mode="widthFix"></image>
			</view>
			<view class="t_gmxz" v-if="tabIndex == 2">
				<u-parse :content="object.buyGuide"></u-parse>
			</view>
			<template v-if="openId != object.openId">
				<view class="operation" @tap="toBuy" v-if="object.goodsType != 3">
					<text v-if="disTap" style="background-color: #c7c7c7;">活动未开始</text>
					<text v-if="!disTap && totalNums == 0" style="background-color: #c7c7c7;">暂无库存</text>
					<text v-if="!disTap && totalNums > 0">去包船</text>
				</view>
				<!-- 只有状态拼船中才能去参与拼船 -->
				<view class="operation" @tap="teamworkShow = true"
					v-if="object.goodsType == 3 && !isMy && object.residueClusteringNum > 0 && object.status == 1"><text>去拼船</text>
				</view>
				<view class="operation" @tap="lookMore()"
					v-if="object.goodsType == 3 && !isMy && object.residueClusteringNum > 0 && object.status == 0"><text>该团已过期,点击查看更多</text>
				</view>
				<view class="operation" v-if="object.goodsType == 3 && !isMy && object.residueClusteringNum == 0"><text
						style="background-color: #c7c7c7;">该团已拼成</text>
				</view>
				<!-- 发起拼船 -->
				<view class="operation" @tap="toBuy" v-if="object.goodsType == 2 && isMy"><text>发起拼船</text>
				</view>
			</template>

		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="getDetail()"></GetPhoneNumber>
		<!-- 参与 -->
		<u-popup :show="teamworkShow" :round="10" mode="bottom" @close="teamworkShow">
			<view class="PopFrame">
				<view class="PopFrame-title">
					<text>参与拼团</text>
					<uni-icons @click="teamworkShow = false" type="closeempty" class="PopFrame-title-close" size="16"
						color="#33333"></uni-icons>
				</view>
				<!-- 选择成团人数 -->
				<view>
					<view class="Teamwork-title">
						{{ object.goodsName||'' }}
					</view>
					<view class="Teamwork-text">
						<text v-if="object.isPostpone == 1">拼船不成功，将为您往后顺延两次</text>
						</br>截止至当天{{ object.playTime||'' }}
						</br>拼船结果以出票订单为准。
					</view>
					<view class="Teamwork-image">
						<view v-for="item, i in TeamworkList">
							<image :src=item.url mode=""></image>
							<view class="Teamwork-image-text" v-if="item.name != ''">{{ item.name||'' }}</view>
						</view>
					</view>

					<view class="Teamwork-text" style="margin-top: 36rpx;color: #111111;font-weight: 400;height: 48rpx;">
						拼单中，还差{{ object.residueClusteringNum||'' }}人，截止时间{{ object.playTime||'' }}
					</view>
				</view>
				<button class="PopFrame-button" @click="toBuy()">确认拼船</button>
			</view>
		</u-popup>
	</page-meta>
</template>

<script>
import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
import customNavBar1 from '@/compoments/uNavBar1'
export default {
	components: {
		customNavBar1,
		GetPhoneNumber
	},
	data() {
		return {
			//拼团数组
			TeamworkList: [],
			teamworkShow: false,
			currentNum: 0,
			shareIcon: 'https://i.ringzle.com/file/20240313/65c1cc963564484e910a1ee92dc17482.png',
			icons: ['https://i.ringzle.com/file/20240313/2ef5642723c24a19bacd924bef469f5c.png',
				'https://i.ringzle.com/file/20240313/dca9f567484844ffbbf8c5640869ce05.png',
				'https://i.ringzle.com/file/20240313/5353862617b8483980425930505c894a.png',
				'https://i.ringzle.com/file/20240313/28f379b8a86f428cb60296a9d5a2a4e0.png'
			], //拼团流程
			list: ['https://fsy.shengsi.gov.cn/file/20240730/9bc1732eadc94cbc8a562ae62997f79b.png'],
			h: uni.getSystemInfoSync().windowHeight,
			object: {

			},
			tabIndex: 1,
			id: '',
			title: '',
			isMy: null,
			openId: '',
			disTap: false,
			merchantId: '1748948099092451329',
			totalNums: 9

		}
	},
	onLoad(opt) {
		this.isMy = opt.isMy ? opt.isMy : null;
		this.id = opt.id;
		this.object.goodsType = opt.goodsType;
		if (opt.robTime) {
			this.object.robTime = opt.robTime;
			this.object.playDate = opt.playDate;
			let hour = new Date().getHours();
			let date = this.getYesterday(this.object.playDate);
			let today = new Date().Format('yyyy-MM-dd');
			if (today == date && (parseFloat(hour) - (parseFloat(this.object.robTime) - 1) > 0)) {//到时间
				this.disTap = false;
			} else {
				this.disTap = true;
			}
		}
		this.$login().then(res => {
			if (res === 0) {
				this.getDetail();
			} else this.$refs['phoneNumber'].show = true;
		})

	},
	filters: {
		filtersRichText(html) { //控制小程序中图片大小
			if (html) {
				let newContent = html.replace(/<img[^>]*>/gi, (match, capture) => {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
	},
	onShareAppMessage: function () {
		return {
			title: this.title,
			path: this.$path
		}
	},
	methods: {
		getYesterday(dateString) {
			const date = new Date(dateString);
			date.setDate(date.getDate() - 1); // 减去一天
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
			const day = date.getDate().toString().padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		//渔家乐首页
		lookMore() {
			uni.redirectTo({
				url: '/pagesTrip/fishJiale2/index'
			})
		},
		//导航
		goLocation(option) {
			let mapdata = {
				latitude: parseFloat(this.object.latitude),
				longitude: parseFloat(this.object.longitude),
				name: this.object.areaDetail,
			}
			uni.openLocation(mapdata);
		},
		getLocation() {
			this.$api.get('api/merchant/food/merchant/' + this.merchantId)
				.then(res => {
					if (res.data.data) {
						this.object.latitude = res.data.data.latitude;
						this.object.longitude = res.data.data.longitude;
						this.object.areaDetail = res.data.data.areaDetail;
					}
				})
		},
		toBuy() {
			if (this.disTap) {
				return false
			}
			let data = encodeURIComponent(JSON.stringify(this.object))
			uni.navigateTo({
				url: '/pagesTrip/fishJiale2/orderWrite?isMy=' + this.isMy + '&data=' + data
			})
		},
		getNum() {
			this.$api.post('scenic/api/goods/queryStockAmount', {
				playDate: this.object.playDate,
				playTime: this.object.playTime,
				merchantId: this.merchantId
			}).then(res => {
				if (res.data.code == 0) {
					this.totalNums = res.data.data;
				}
			})
		},
		getDetail() {
			this.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
			this.$api.get('/scenic/api/goods/' + this.id)
				.then(res => {
					this.object = res.data.data;
					if(this.object.coverImg) this.list = [this.object.coverImg];
					if (this.object.goodsType == 1) {
						this.getNum();
					}
					this.getLocation();
					this.title = `仅剩${this.object.residueClusteringNum}人，我拼了${this.object.goodsName}体验`;
					if (this.object.goodsType == 3) {
						this.object.residueClusteringNum = this.object.residueClusteringNum || 0;
						let num = this.object.clusteringNum - this.object.residueClusteringNum;
						if (num > 3) {
							num = 4;
						}
						for (let i = 0; i < num; i++) {
							this.TeamworkList.push({
								url: 'https://i.ringzle.com/file/20240313/ef7e99bda4da476a92f36be34f861db9.png',
								name: i == 0 ? "团长" : "船员",
							})
						}
						this.TeamworkList.push({
							url: 'https://i.ringzle.com/file/20240313/29823801e7c2470ab370c1cce321a455.png',
							name: ''
						})
						this.$nextTick(() => {
							this.$forceUpdate();
						})
					}
				})

		},
	}
}
</script>
<style lang="less">
// 弹框样式
.PopFrame {
	background: white;
	height: 900rpx;
	padding: 40rpx 20rpx;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	box-sizing: border-box;

	// 弹框头部标题
	.PopFrame-title {
		text-align: center;
		margin-bottom: 40rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
		height: 50rpx;
		line-height: 50rpx;

		.PopFrame-title-close {
			position: absolute;
			right: 30rpx;
			// float: right;
			font-weight: normal;
			color: #333333;
		}
	}

	// 弹框中列表样式   <!-- 选择游玩时间 -->
	.PopFrame-list {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		box-sizing: border-box;

		// 游玩弹框列表中的单个样式
		.PopFrame-play-box {
			width: 118rpx;
			height: 142rpx;
			border-radius: 12rpx;
			border: 1rpx solid #EFEFEF;
			margin: 10rpx 8rpx;
			text-align: center;
			color: #333333;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
		}

		// 游玩无法选择弹框样式
		.PopFrame-play-prohibit {
			width: 118rpx;
			height: 142rpx;
			border-radius: 12rpx;
			border: 1rpx solid #EFEFEF;
			margin: 10rpx 8rpx;
			text-align: center;
			color: #AAAAAA;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
		}

		// 弹框中列表样式   <!-- 选择成团人数 --> clustering
		.PopFrame-clustering-box {
			width: 148rpx;
			height: 142rpx;
			border-radius: 12rpx;
			border: 1rpx solid #EFEFEF;
			box-sizing: border-box;
			text-align: center;
			margin: 10rpx 11rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
		}

		// 游玩单个弹框列表选中样式
		.PopFrame-clustering-Selected {
			width: 148rpx;
			height: 142rpx;
			border-radius: 12rpx;
			border: 1rpx solid #007A69;
			color: #007A69;
			box-sizing: border-box;
			text-align: center;
			margin: 10rpx 11rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
		}
	}

	// 参与拼团样式
	.Teamwork-title {
		height: 45rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
		margin-bottom: 27rpx;
	}

	// 参与拼团文字样式
	.Teamwork-text {
		width: 520rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #FF4141;
		line-height: 48rpx;
		text-align: center;
		font-style: normal;
		margin: auto;
	}

	// 参与拼团图片样式
	.Teamwork-image {
		display: flex;
		box-sizing: border-box;
		padding: 30rpx;
		margin-top: 120rpx;

		view {
			height: 100rpx;
			width: 100rpx;
			margin: 0 16rpx;
		}

		.Teamwork-image-none {
			font-size: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #bebebe;
		}

		.Teamwork-image-none,
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 2rpx dotted #bebebe;
		}

		.Teamwork-image-text {
			width: 76rpx;
			height: 28rpx;
			background: #007A69;
			border-radius: 14rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 28rpx;
			text-align: justify;
			font-style: normal;
			text-align: center;
		}
	}

	// 确定按钮样式
	.PopFrame-button {
		width: 702rpx;
		height: 88rpx;
		background: #007A69;
		border-radius: 44rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 37rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}
}
</style>

<style scoped lang="less">
.page {
	overflow-y: auto;
	padding-bottom: 180rpx;

	.share {
		position: fixed;
		top: 810rpx;
		z-index: 99;
		right: 0;
		width: 156rpx;
		height: 64rpx;
		background-color: #FEB000;
		color: #fff;
		font-weight: bold;
		border-radius: 30rpx 0 0 30rpx;
		font-size: 28rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}
	}

	.content {
		.info {
			width: 100%;
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 36rpx 24rpx 48rpx;
			box-sizing: border-box;

			.i_title {
				font-size: 36rpx;
				font-weight: bold;
				color: #111111;
			}
		}

		.tabs {
			border-top: 20rpx solid #F5F8FA;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			&>view {
				width: calc(100% / 3);
				padding: 30rpx 0;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				position: relative;

				&.active {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					&::after {
						content: '';
						width: 120rpx;
						height: 6rpx;
						background: #007A69;
						position: absolute;
						left: 50%;
						margin-left: -60rpx;
						bottom: 0;
					}
				}
			}
		}

		.t_spts {
			padding: 0 24rpx;
			padding-bottom: 75px;

			image {
				width: 100%;
				height: 2312rpx;
				margin-top: -30rpx;
			}

			.marks {
				display: grid;
				grid-template-columns: 38% 38% 24%;
				flex-wrap: wrap;
				padding-left: 20rpx;

				.item {
					margin: 30rpx 0 48rpx;

					text {
						font-size: 26rpx;
						line-height: 26rpx;
						color: #666;
						display: block;

						&:first-child {
							color: #333;
							margin-bottom: 28rpx;
							font-weight: bold;
						}

						&:last-child {
							position: relative;
							padding-left: 10px;

							&::after {
								display: block;
								content: "";
								width: 10rpx;
								height: 10rpx;
								background-color: #D8D8D8;
								border-radius: 100%;
								position: absolute;
								left: 0;
								top: 42%;
								z-index: 1;
							}
						}
					}
				}
			}
		}

		.t_gmxz {
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			line-height: 36rpx;
			padding-bottom: 75px;
		}

		.operation {
			padding: 16rpx 25rpx 36rpx 25rpx;
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;

			text {
				display: block;
				height: 88rpx;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: #007A69;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	// 基本信息
	.basicInfo {
		padding: 48rpx 30rpx 0;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #fff;
		position: relative;
		z-index: 2;
		transform: translate(0, -30rpx);

		.pcInfo {
			height: 168rpx;
			border-radius: 24rpx;
			background-color: #007A69;
			display: flex;
			justify-content: center;
			padding: 0 20rpx;
			flex-direction: column;
			margin: -38rpx 0 48rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: -12rpx;

				.price {
					color: #fff;

					text {
						display: inline-block;

						&:first-child {
							font-size: 36rpx;
						}

						&:nth-child(2) {
							font-size: 54rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}

						&:last-child {

							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
				}

				.num {
					color: #FFF54D;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.bottom {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					image {
						width: 24rpx;
						height: 28rpx;
						margin-right: 16rpx;
					}

					width: 240rpx;
					border-radius: 16rpx;
					height: 44rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #007A69;
					justify-content: center;
				}

				.right {
					text {
						display: inline-block;
						font-size: 26rpx;
						color: #fff;
						margin-left: 10rpx;
					}
				}
			}

		}


		.name {
			font-size: 36rpx;
			font-weight: bold;
			color: #111111;
			position: relative;
			line-height: 42rpx;
		}

		.i_price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;

			&>view {
				&:first-child {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FD3939;

					text {
						font-size: 48rpx;
					}

					.unit {
						font-size: 24rpx;
						color: #777;
						font-weight: initial !important;
					}
				}

				&:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					// text {
					// 	font-family: PingFang-SC-Bold, PingFang-SC;
					// 	font-weight: bold;
					// 	color: #808080;
					// 	margin-left: 8rpx;
					// }
				}
			}
		}

		.beforePrice {
			font-size: 28rpx !important;
			color: #999 !important;
			text-decoration: line-through;
			margin-left: 10rpx;
			vertical-align: bottom;
			font-weight: initial !important;
			line-height: 42rpx;
		}

		.remark {
			margin: 20rpx 0 24rpx;

			text {
				display: inline-block;
				color: #C9A771;
				font-size: 22rpx;
				padding: 8rpx 11rpx;
				border: 1rpx solid #C9A771;
				margin-right: 18rpx;
				border-radius: 4rpx;

			}
		}

		.one-input {
			box-sizing: border-box;
			width: 100%;
			height: 128rpx;
			background: #F0F8F6;
			border-radius: 16rpx;
			padding-left: 20rpx;

			.bg-purple-light {

				// display: flex;
				.one2 {
					// height: 36rpx !important;
					font-size: 26rpx;
					color: #000000;
					margin-bottom: 12rpx;
					font-weight: bold;
				}

				.two2 {
					font-size: 24rpx;
					color: #666666;
					font-weight: Regular;
				}
			}

			.bg-purple {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				font-size: 24rpx;
				color: #808080;
				background-image: url('https://i.ringzle.com/file/20240129/dcf2338517e344c697ef7cd853ce2234.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 128rpx;
				padding-right: 10rpx;


				.one1 {
					padding-top: 24rpx;
					width: 34rpx;
					height: 46rpx;

					image {
						width: 100%;
						height: 100%;
						margin-bottom: 4rpx;
						// width: 46rpx;
						// height: 46rpx;
					}

				}

				.two1 {
					font-size: 22rpx;
					color: #007A69;
				}
			}
		}

		.li {
			margin-top: 30rpx;
			font-size: 28rpx;

			text {
				display: inline-block;
				color: #007A69;

				&:first-child {
					margin-right: 36rpx;
					color: #111;
				}
			}
		}
	}

	//拼团流程
	.pcRules {
		padding-bottom: 30rpx;
		border-top: 10px solid #F5F8FA;

		.line {
			width: 64rpx;
			border-top: 6rpx dashed #EBEDEF;
			margin: 0 14rpx;
			margin-bottom: 20px;
		}

		.tit {
			padding: 25rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #999;
				font-weight: inherit;

				&:first-child {
					color: #111;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		.tu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 35rpx;

			.item {
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-bottom: 8rpx;
				}

				text {
					line-height: 30rpx;
					color: #515256;
					font-size: 22rpx;
				}
			}
		}
	}

	/deep/.u-popup__content {
		border-radius: 32rpx 32rpx 0 0;
	}

	/deep/.u-scroll-list {
		padding-bottom: 0;
	}
}
</style>
<style lang="scss">
/deep/.wxParse .p {
	margin: 0 !important
}

.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #FFFFFF;
		font-size: 12px;
	}
}
</style>